<template>
  <NavSwiper/>
  <div ref="target">
    <NewGoodCourse v-if='targetIsVisible'></NewGoodCourse>
  </div>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core'
import NavSwiper from '@/components/NavSwiper/index.vue'

// 异步加载组件
const NewGoodCourse = defineAsyncComponent(() =>
    import('@/components/NewGoodCourse/index.vue')
)

const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if( isIntersecting ) {
        targetIsVisible.value = isIntersecting
      }
    },
)
</script>

<style scoped>
</style>
